import React, { PureComponent } from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { CSSTransition } from 'react-transition-group'
import { actionCreators } from './store'
import { actionCreators as actionCreatorsLogin } from '../login/store'
import { 
  Wrapper, 
  Logo, 
  Nav, 
  NavItem, 
  SearchWrapper, 
  NavSearch, 
  SearchInfo,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoList,
  SearchInfoItem,
  Addition, 
  Button 
} from './style'

class Header extends PureComponent {
  render () {
    const { focused, isLogin, logout, searchFocus, searchList, searchBlur } = this.props
    
    return (
      <Wrapper>
        <Link to='/'>
          <Logo />
        </Link>
        <Nav>
          <NavItem className='left active'>首页</NavItem>
          <NavItem className='left'>下载App</NavItem>
          {
            isLogin ? 
              <NavItem className='right' onClick={logout}>退出</NavItem> :
              <Link to='/login'>
                <NavItem className='right'>登录</NavItem>
              </Link>
          }
          <NavItem className='right'>
            <i className='iconfont'>&#xe636;</i>
          </NavItem>
          <SearchWrapper>
            <CSSTransition
              in={focused}
              timeout={200}
              classNames='silder'
            >
              <NavSearch 
                placeholder='搜索' 
                className={focused ? 'focused' : ''}
                onFocus={() => {searchFocus(searchList)}} 
                onBlur={searchBlur}
              />
            </CSSTransition>
            <i className='iconfont zoom'>&#xe614;</i>
            {this.getListArea()}
          </SearchWrapper>
        </Nav>
        <Addition>
          <Button className='writting'>
            <i className="iconfont">&#xe615;</i>
            写文章
          </Button>
          <Button className='reg'>注册</Button>
        </Addition>
      </Wrapper>
    )
  }

  getSearchListEles () {
    const { page, searchList } = this.props
    const newList = searchList.toJS()
    const newSearchList = []

    if (newList.length) {
      for (let index = (page - 1) * 10; index < page * 10; index++) {
        const item = newList[index]
        newSearchList.push(<SearchInfoItem key={item}>{item}</SearchInfoItem>)
      }
    }

    return newSearchList
  }

  getListArea () {
    const { focused, mouseIn, page, totalPage, setSearchMouseIn, searchSwitchClick } = this.props

    if (focused || mouseIn) {
      return (
        <SearchInfo 
          onMouseEnter={() => {setSearchMouseIn(true)}} 
          onMouseLeave={() => {setSearchMouseIn(false)}}
        >
					<SearchInfoTitle>
						热门搜索
						<SearchInfoSwitch onClick={() => {searchSwitchClick(page, totalPage, this.searchSpin)}}>
							<i ref={spin => this.searchSpin = spin} className="iconfont spin">&#xe851;</i>
							换一批
						</SearchInfoSwitch>
					</SearchInfoTitle>
          <SearchInfoList>
            {this.getSearchListEles()}
					</SearchInfoList>
				</SearchInfo>
			)
    } else {
      return null
    }
  }
}

const mapState = (state) => ({
  focused: state.getIn(['header', 'focused']),
  searchList: state.getIn(['header', 'searchList']),
  mouseIn: state.getIn(['header', 'mouseIn']),
  page: state.getIn(['header', 'page']),
  totalPage: state.getIn(['header', 'totalPage']),
  isLogin: state.getIn(['login', 'isLogin'])
})

const mapAction = (dispatch) => ({
  logout: () => {
    dispatch(actionCreatorsLogin.changeIsLogin(false))
  },

  searchFocus: (list) => {
    list.size === 0 && dispatch(actionCreators.getSearchListAction())
    dispatch(actionCreators.getSearchFocusAction())
  },

  searchBlur: () => {
    dispatch(actionCreators.getSearchBlurAction())
  },

  setSearchMouseIn: (bool) => {
    dispatch(actionCreators.setSearchMouseIn(bool))
  },

  searchSwitchClick: (page, totalPage, spin) => {
    let deg = spin.style.transform.replace(/[^0-9]/ig, '')
    if (deg) {
      deg = parseInt(deg, 10)
    } else {
      deg = 0
    }
    spin.style.transform = `rotate(${deg + 360}deg)`

    if (page < totalPage) {
      dispatch(actionCreators.setSearchPage(page += 1))
    } else {
      dispatch(actionCreators.setSearchPage(1))
    }
  }
})

export default connect(mapState, mapAction)(Header)
